Виджеты. ListView GridView

➡️ Скачать презентацию. Flutter ListView GridView
➡️ Ссылка на репозиторий с кодом этого урока

Виджет GridView

GridView прокручиваемый виджетr, который позволяет располагать дочерние элементы в виде сетки. Он используется, когда нужно отобразить элементы в табличной структуре, например, галерею изображений, список товаров в интернет-магазине, плитки с информацией и т. д.

GridView.count

GridView.count - используется, когда количество колонок известно заранее.

import 'package:flutter/material.dart';

class GridViewExample1 extends StatelessWidget {
  const GridViewExample1({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3, // Количество колонок
      crossAxisSpacing: 10, // Расстояние между колонками
      mainAxisSpacing: 10, // Расстояние между строками

      padding: EdgeInsets.all(16),
      children: List.generate(9, (index) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            color: Colors.blue[200],
          ),
          alignment: Alignment.center,
          child: Text('Элемент ${index + 1}'),
        );
      }),
    );
  }
}

                  

GridView.extent

GridView.extent - позволяет задать максимальную ширину элементов, автоматически подстраивая количество колонок.

class GridViewExample2 extends StatelessWidget {
  const GridViewExample2({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 100, // Максимальная ширина элемента
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      children: List.generate(15, (index) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            color: Colors.blue[200],
          ),
          alignment: Alignment.center,
          child: Text(
            'Элемент $index',
          ),
        );
      }),
    );
  }
}

                  

GridView.builder

GridView.builder - используется, когда количество элементов неизвестно заранее (например, загружается с сервера).

class GridViewExample3 extends StatelessWidget {
  const GridViewExample3({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 15,
        mainAxisSpacing: 15,
        childAspectRatio: 1.5, // Соотношение сторон
      ),
      itemCount: 20,
      itemBuilder: (context, index) {
        return Container(
          color: Colors.white,
          alignment: Alignment.center,
          child: Text('Элемент $index'),
        );
      },
    );
  }
}

                  

Зачем нужен AspectRatio

Виджет AspectRatio во Flutter используется для управления соотношением сторон дочернего виджета.

Он позволяет задать фиксированное соотношение ширины и высоты (width-to-height ratio) для своего дочернего элемента (child), что может быть полезно в различных сценариях, таких как создание адаптивных интерфейсов, работа с изображениями или видео, а также при создании сеток и других компоновок.

AspectRatio принимает два параметра:

• aspectRatio — число, задающее соотношение сторон (ширина / высота).
• child — дочерний виджет, который будет ограничен этим соотношением.

AspectRatio(
  aspectRatio: 16 / 9, // Соотношение сторон 16:9
  child: Container(
    color: Colors.blue,
  ),
);

                  

В этом примере создаётся контейнер с соотношением сторон 16:9. Независимо от размера родительского контейнера, этот элемент всегда будет сохранять заданное соотношение.

Что такое соотношение сторон?

Соотношение сторон (aspect ratio) — это пропорция между шириной и высотой элемента. Оно выражается в виде дроби, например:

• 1:1 — квадрат (ширина равна высоте)
• 16:9 — широкоформатный прямоугольник (ширина больше высоты)
• 4:3 — классический прямоугольник (ширина немного больше высоты)

Как рассчитывается соотношение сторон?

Соотношение сторон рассчитывается как отношение ширины к высоте:

• Для соотношения 16 / 9 aspectRatio ≈ 1.78
• Для соотношения 1 / 1 aspectRatio ≈ 1